import store from '@/store'
import {
  VuexModule,
  Module,
  Mutation,
  Action,
  getModule
} from 'vuex-module-decorators'
import Cookies from 'js-cookie'

export enum DeviceType {
  Desktop = 'desktop',
  Mobile = 'mobile'
}

export interface AppState {
  sidebar: { opened: boolean; withoutAnimation: boolean }
  device: DeviceType
}

@Module({ store, dynamic: true, namespaced: true, name: 'app' })
class App extends VuexModule implements AppState {
  // state
  public sidebar = {
    opened: Cookies.get('sidebarStatus') !== 'closed',
    withoutAnimation: false
  }
  public device: DeviceType = DeviceType.Desktop

  // mutations
  @Mutation
  private TOGGLE_SIDEBAR () {
    this.sidebar.opened = !this.sidebar.opened
    this.sidebar.withoutAnimation = false

    if (this.sidebar.opened) {
      Cookies.set('sidebarStatus', 'opened', { path: process.env.BASE_URL })
    } else {
      Cookies.set('sidebarStatus', 'closed', { path: process.env.BASE_URL })
    }
  }

  @Mutation
  private CLOSE_SIDEBAR (withoutAnimation: boolean) {
    this.sidebar.opened = false
    this.sidebar.withoutAnimation = withoutAnimation

    Cookies.set('sidebarStatus', 'closed', { path: process.env.BASE_URL })
  }

  @Mutation
  private TOGGLE_DEVICE (device: DeviceType) {
    this.device = device
  }

  // actions
  @Action
  public toggleSidebar () {
    this.TOGGLE_SIDEBAR()
  }

  @Action
  public closeSidebar (withoutAnimation: boolean) {
    this.CLOSE_SIDEBAR(withoutAnimation)
  }

  @Action
  public toggleDevice (device: DeviceType) {
    this.TOGGLE_DEVICE(device)
  }
}

export default getModule(App)
